<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="combo-select-demo cmn-box">
    <h3>disable demo</h3>
    <div class="test-btn">
        <jigsaw-button (click)="changeDisabled()">toggle disable</jigsaw-button>
    </div>
    <jigsaw-combo-select [disabled]="disabled"
                         [(value)]="selectedCity"
                         [open]="true"
                         maxWidth="500"
                         [clearable]="true">
        <ng-template>
            <jigsaw-tile [(selectedItems)]="selectedCity"
                         trackItemBy="label"
                         width="400px">
                <jigsaw-tile-option *ngFor="let city of cities" [value]="city" width="22.8%">
                    {{city.label}}
                </jigsaw-tile-option>
            </jigsaw-tile>
        </ng-template>
    </jigsaw-combo-select>
</div>

